/*====================================================
  GENERAL STYLING
======================================================*/
@font-face {
    font-family: 'Slate Pro';
    font-style: normal;
    font-weight: normal;
    src: local('Slate Pro'), url('../fonts/SlatePro.woff') format('woff');
}


@font-face {
    font-family: 'Slate Pro Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Slate Pro Medium'), url('../fonts/SlatePro-Medium.woff') format('woff');
}

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('../fonts/MYRIADPRO-REGULAR.woff') format('woff');
}
@font-face {
font-family: 'Myriad Pro Light';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Light'), url('../fonts/MyriadPro-Light.woff') format('woff');
}
* {
    font-family: 'Slate Pro';
}
section#hero-index {
    padding: 7rem 11rem 0;
}
section#video-calendar {
    padding: 7rem 8rem 0 6rem;
}
/*====================================================
  HEADER
======================================================*/


nav#mobile-nav{
    display: none;
}
#homepage {
    background-color: #ECECEC;
    width: 100%;
    height: 87px;
}

#homepage > div {
    margin: auto;
    padding: 0;
    width: 100%;
}

.left-brand,
.midd-brand,
.right-login {
    padding: 0;
}

.middle-brand {
    text-align: center;
}

.right-login {
    text-align: right;
}

.left-brand > a > img.zb-fff {
    position: absolute;
    top: 25%;
    left: 12%;
}

.middle-brand > img {
    margin: 1em auto;
}

p.userguide-links > a {
    color: #808080;
    text-align: center;
    position: absolute;
    top: 14%;
    left: 34%;
    font-size: 14px;
    line-height: 16px;
}

p.logout {
    text-align: left;
    font-size: 14px;
    line-height: 16px;
    width: 12em;
    position: absolute;
    top: 14%;
    right: 4%;
}

p.logout > a {
    color: #FFF;   
}

button#logout {
    border: none;
    background: none;
    padding: 0;
    color: #FFF;
    cursor: pointer;
}

/*=======================
  ALL NAVIGATION
=======================*/
#navigation {
    background-image: linear-gradient(#ECECEC, #565656);
    width: 100%;
    margin: auto;
}

#navigation > ul {
    justify-content: center;
}
#navigation > ul.nav.nav-pills > li.nav-item.button-slanted > a.nav-link {
    padding: .2rem;
}
.button-slanted {
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    width: 13rem;
    text-align: center;
    font-size: 14px;
}
.button-slanted:hover {
    box-shadow: inset 0 0 10px #000000;
}

.button-not-slanted.show {
    transform: skewX(20deg) !important;
    text-align: center;
    border: none;
    border-radius: 0;
    padding: 0;
}



.button-slanted-content {
    color: #FFF;
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    display: inline-block;
}

/* removes angle icon */
.button-slanted > a.nav-link.dropdown-toggle::after {
    display: none;
}


/*==============================
  ORANGE BUTTON
  light orange = #EB8F00
  dark  orange = #BE4D13
  pale orange = rgba(235, 143, 0, .2) or #FBE9CC
================================*/
.orange,
.orange.show > .orange-dropdown-toggle {
    background-image: linear-gradient(#EB8F00, #BE4D13);
}
.button-slanted.orange:hover div.dropdown-menu.button-not-slanted.orange-not-slanted {
    display: block;
    transform: skewX(20deg) !important;
    width: 13rem;
    text-align: center;
    position: absolute;
    top: 96%;
    left: 9%;
    border: none;
    border-radius: 0;
    padding: 0;
    background-color: rgba(235, 143, 0, .2);
    color: #BE4D13;

}
#orange-dropright-checklist {
    display: none;
    list-style: none;
    padding: 0;
    background-color: #BE4D13;
    position: absolute;
    top: 0%;
    left: 100%;
}
div.dropdown-menu.orange-not-slanted.show {
    background-color: rgba(235, 143, 0, .2);
    color: #BE4D13;
}

.orange-dropdown-item {
    color: #BE4D13;
}

.orange-dropdown-item:hover {
    background-color: #BE4D13;
    color: #FFF;
}



.orange-dropright-li {
    color: #FFF;
}

.orange-dropdown-item:hover #orange-dropright-checklist { 
    display: block;
}

.orange-li {
    padding: .5em 1em;
}

.orange-li:hover {
    background-color: #FBE9CC;
    text-decoration: none;
}

.orange-li:hover .orange-dropright-li {
    color: #BE4D13;
    text-decoration: none;
}

/*==============================
  PURPLE BUTTON
  light purple = #DFE1ED
  dark purple = #5E67A4
================================*/
.purple,
.purple.show > .purple-dropdown-toggle {
    background-color: #5E67A4;
}
.button-slanted.purple:hover div.dropdown-menu.button-not-slanted.purple-not-slanted { 
    display: block;
    transform: skewX(20deg) !important;
    width: 13rem;
    text-align: center;
    position: absolute;
    top: 96%;
    left: 10%;
    border: none;
    border-radius: 0;
    padding: 0;
    background-color: rgba(94, 103, 164, .2);
    color: #5E67A4;

}
.purple-not-slanted.show {
    background-color: rgba(94, 103, 164, .2);
    color: #5E67A4;
}

.purple-dropdown-item {
    background-color: #DFE1ED;
    color: #5E67A4;
}
.purple-dropdown-item:hover {
    background-color: #5E67A4;
    color: #FFF;
}
#purple-dropright-cmn {
    display: none;
    list-style: none;
    padding: 0;
    background-color: #DFE1ED;
    position: absolute;
    top: 0;
    left: 100%;
}

a.purple-dropright-li {
    color: #FFF;
}

.purple-dropdown-item:hover #purple-dropright-cmn{
    display: block;
}

#purple-dropright-serviceAgreement {
    display: none;
    list-style: none;
    padding: 0;
    background-color: #DFE1ED;
    position: absolute;
    top: 50%;
    left: 100%;
}

.purple-dropdown-item:hover #purple-dropright-serviceAgreement{
    display: block;
}

li.purple-li {
    padding: .5rem 1rem;
}

.purple-li:hover {
    background-color: #5E67A4;
    text-decoration: none;
}

.purple-li:hover a.purple-dropright-li {
    text-decoration: none;
    color: #FFF;
}

/*==============================
  green button
  light green = #8DC640
  dark green = #029245
================================*/
.green {
    background-image: linear-gradient(#8DC640, #029245);
}

/*==============================
  blue button
  light blue = #4486BD
  dark blue = #3C91C3
================================*/
.blue {
    background-image: linear-gradient(#4486BD, #3C91C3);
}

/*==============================
  yellow button
  light yellow = #F2BB00
  dark yellow = #9B6A06
  #FCF1CC
================================*/
.yellow,
.yellow.show > .yellow-dropdown-toggle {
    background-image: linear-gradient(#F2BB00, #9B6A06);
}
.button-slanted.yellow:hover div.dropdown-menu.button-not-slanted.yellow-not-slanted {
    display: block;
    transform: skewX(20deg) !important;
    width: 13rem;
    text-align: center;
    position: absolute;
    top: 96%;
    left: 7%;
    border: none;
    border-radius: 0;
    padding: 0;
    background-color: rgba(242, 187, 0, 0.2);
    color: #5E67A4;
}
.yellow-not-slanted.show {
    background-color: rgba(242, 187, 0, 0.2);
    color: #5E67A4;
}

.yellow-dropdown-item {
    color: #9B6A06;
}

.yellow-dropdown-item:hover {
    background-color: #F2BB00;
    color: #FFF;
}

#yellow-dropright-inventory {
    display: none;
    list-style: none;
    padding: 0;
    background-color: #F2BB00;
    position: absolute;
    top: 33%;
    left: 100%;
}

a.yellow-dropright-li {
    color: #FFF;
}

.yellow-dropdown-item:hover #yellow-dropright-inventory {
    display: block;
}

.yellow-li {
    padding: .5em 1em;
}

.yellow-li:hover {
    background-color: #FCF1CC;
    text-decoration: none;
}

.yellow-li:hover a.yellow-dropright-li {
    text-decoration: none;
    color: #F2BB00;
}

/*==============================
  turquoise button
  light turquoise = #0EA899
  dark turquoise = #006837
================================*/
.turquoise {
    background-image: linear-gradient(#0EA899, #006837);
}

/*=======================
  HERO-INDEX
=======================*/
/*
.hero-image{
    padding: 8.5rem 2rem 4rem 2rem;
}
*/
#hero-index {
    background-color:lightgray;
    width: 100%;
}
.hero-image {
    text-align: center;
    width: 100%;
    margin: auto;
}
.hero-image > img {
    border-radius: 20px;
    height: 500px;
    width: 100%;
}
.header-text{
    position: absolute;
    top: 64%;
    right: 20%;
}
h1.header {
    font-size: 2.8rem;
    text-align: left;
    color: #FFF;
    margin-bottom: 0;
    line-height: 44px;
}
h4.subheader {
    font-size: 1.5rem;
    color: #FFFF00;
    text-align: right;
    line-height: 2px;
}
/*=======================
  VIDEO & CALENDAR
=======================*/
#video-calendar {
    background-color: lightgray;
    width: 100%;
}
/*
.video-cal {
    padding: 0 9rem 5rem 6rem;
}
*/
.video,
.calendar {
    max-width: 50%;
}
/*=======================
  VIDEO INDEX
=======================*/

.video {
    text-align: center;
}
.video > video {
    background-color: #000;
    border: 5px solid #000;
    border-radius: 3px;
/*
    width: 100%;
    height: 17.6em;
*/
    margin-bottom: 1em;
}
.video > p,
.calendar > p {
    color: grey;
    text-align: center;
}
.video > p {
    padding-top: 5px;
}
.zimmer-video {
    width: 80%; 
    height: 425px;
}
svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-video,
svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-video,
svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-cal,
svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-cal {
    color: #495057;
    font-size: 1.5rem;
    font-weight;
}
svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-video,
svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-cal{
    position: relative;
    top: 14.5rem;
    left: 13.3rem;
}
svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-video,
svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-cal {
    position: relative;
    top: 14.5rem;
    right: 13.3rem;
}
/*=======================
  CALENDAR INDEX
=======================*/
.table-border th {
    border: 2px solid darkgrey;
}
thead#calendar-header > tr > th {
    background-color: lightgrey;
    color: #FFF;
    font-weight: 100;
    text-align:center;
    padding: 0 2vw;
}
#calendar-table > tbody > tr > td.current-month {
    background-color: #FFF;
    color: grey;
    padding: 0;
}
#calendar-table > tbody > tr > td.next-month {
    background-color: #ededed;
    color: lightgrey;
    padding: 0;
}
span.dates {
    position: relative;
    bottom: 0;
    left: 5.5rem;
}
.current-month > p {
    font-size: 6px;
    text-align: center;
    margin: 0;
}
p > span.large {
    font-size: 1rem;
}
.table > tbody > tr > td {
    height: 5rem;
    vertical-align: baseline;
}
thead#calendar-header> tr > th,
span.dates {
    font-family: 'Myriad Pro Light', sans-serif;
}

#calendar-table > tbody > tr > td.current-month.fuschia-bg {
    background-color: #C1066F;
    color: #FFF;
}
#calendar-table > tbody > tr > td.current-month.yellow-bg {
    background-color: #E3A400;
    color: #FFF;
}
#calendar-table > tbody > tr > td.current-month.blue-bg {
    background-color: #67B0CE;
    color: #FFF;
}
#calendar-table > tbody > tr > td.current-month.green-bg {
    background-color: #88C91A;
    color: #FFF;
}
img.growth {
    width: 4%;
    position: absolute;
    top: 10%;
    left: 50%;
}
img.social {
    width: 8%;
    position: absolute;
    top: 43%;
    left: 19%;
}
img.population {
    width: 5%;
    position: absolute;
    top: 60%;
    left: 75%;
}
img.mobile {
    width: 4%;
    position: absolute;
    top: 74%;
    left: 49%;
}
/*=======================
  DOWNLOADABLES - INDEX
=======================*/
#downloadables {
    background-color: lightgray;
    width: 100%;
/*    padding-bottom: 4em;*/
}
#carouselDownloadables > div > div {
    
}
#carouselDownloadables > div > div > div.row.container {
    margin: auto;
    max-width: 100%;
}
.downloadables-card {
    text-align:center;
    margin: auto;
    width: 20rem;
    border-radius: 10px;
}
.downloadables-card > div {
    padding: .5rem;
}
.downloadables-card > div > div {
    margin: auto;
}
.downloadables-img-top {
    height: 260px;
    padding: .6em
}
.downloadable-col-text,
.pdf-icon {
    padding: 0;
    text-align: center;
}
.pdf-icon > img{
    width: 100%;
    position: relative;
    top: 1rem;
}
.downloadable-col-text > p {
    color: #FFF;
    font-size: 21px;
}
.card-1 {
    background-image: linear-gradient(#4486BD, #3C91C3);
    border:none;
}
.card-2 {
    background-image: linear-gradient(#8DC640, #029245);
    border:none;
}
.card-3 {
    background-color: #5E67A4;
    border:none;
}
.card-4 {
    background-image: linear-gradient(#F2BB00, #9B6A06);
    border:none;
}
span.carousel-control-prev-icon {
    position: relative;
    left: -3em;
    color: grey;
}
span.carousel-control-next-icon {
    position: relative;
    right: -3em;
}
/*=======================
  FOOTER - INDEX
=======================*/
#footer {
  
    margin-top: .5rem;
}
#footer > div {
    margin: auto;
    max-width: 100%;
}
#footer > div > div {
    margin: 0 auto;
}
img.footer-buttons {
    cursor: pointer;
    width: 12rem;
}

/*====================================================
  LOGIN PAGE
======================================================*/
#login-page{
    padding: 0 4em;
}
#login-header {
    padding: 0 30rem;
}
#reset-instructions {
    padding: 0 30rem;
}
#login-header > div {
    margin: auto;
    padding: 2em 0;
}

.brand-text {
    padding: 1.5em 0 0 0;
}

.brand-text > h6 {
    color: #808080;
    font-family: Arial;
}

#login-page > div {
    /*background-image: url('../img/HRMLogin/Hub_Background.png');*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 1200px;
    height: 800px;
    margin: auto;
    /*border: solid;
    border-color: teal;*/
}
.z-image > img{
    width: 118px;
    position: absolute;
    left: 56rem;
    top: 14rem;
}


.login-wrapper {
    margin: 7rem auto 0;
    background-color: #BCBEC0;
    height: 400px;
    width: 360px;
    text-align: center;
    padding-top: 20px;
    border: none;
    border-radius: 5px;
    background-position: center 12px, center top; /* tweak 12px as needed */
    background-size: 100px 50px, 316px 400px;
    margin: 7rem auto 0;
    background-color: #BCBEC0;
    text-align: center;
    padding-top: 20px;
    border: none;
    border-radius: 5px;
    /*box-shadow: 0 20px 10px rgba(0,0,0,.5);*/
    margin-top: 20px;
}

.login-wrapper > h6 {
    padding-top: 4rem;
    font-size: 1rem;
}

.login-wrapper > img {
    width: 184px;
}
img.username-btn,
img.password-btn,
.remember-me{
    margin-top: 0.5rem;
}


.remember-me > img {
    width: 22px;
}

.remember-me > a {
    font-size: 1.5rem;
}
.remember-me > a,
.login-text > a {
    text-decoration: none;
}

.remember-me > a > h6 {
    font-size: 16.8px;
    color: #808080;
    display: inline-block;
}

.login-text > a > h4 {
    color: #CB1721;
    font-size: 1.2em;
    border-bottom: 1px solid #CB1721;
    width: 14%;
    margin: auto;
}

#reset-instructions {
    margin-top: 1rem;
}

#reset-instructions > div {
    margin: auto;
}

.col-1-instructions,
.col-1-instructions > ul,
.col-2-instructions,
.col-2-instructions > ul {
    padding: 0;
}

.left-items,
.right-items {
    list-style: none;
    font-weight: 600;
}

@media (max-width:992px) {
    .divider-responsive {
        display: none;
    }
}

.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* default desktop look */
.logo-box {
    margin-right: 70px;
}


/* on 992px and below 75% of viewport width */
@media (max-width:992px) {

    .logo-box {
        flex: 1 1 auto !important; /* allow shrinking and growing */
        margin-right: 0; /* remove forced desktop margin */
        width: 100%; /* take full width */
    }

        .logo-box img {
            width: 25vw !important;
            height: auto !important;
            max-width: none !important;
            max-height: none !important;
        }

    .login-wrapper {
        margin: 0 auto !important; /* center the login form */
    }
}

/* override for screens under 992px */
@media (max-width:992px) {
    #login-page > div {
        width: 100% !important; /* stretch to viewport width */
        height: 600px !important; /* force 600px height */
    }
}

.login-wrapper-dark {
    background-color: white !important;
    border:2px solid #024178; /* light gray */
    border-radius: 6px; /* optional rounded corners */
}